<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
    @import "../my-components/count-to/count-to.less";

</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :md="24" :lg="8">
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                        <Card>
                            <Row type="flex" class="user-infor">
                                <Col span="24" style="padding-left:6px;">
                                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                                        <div  style="width:100%;">
                                            <p style="text-align: center"><b class="card-user-infor-name">{{username}}</b></p>
                                            <p style="text-align: center">{{dengji}}</p>
                                        </div>
                                    </Row>
                                </Col>
                            </Row>
                            <div class="line-gray"></div>
                            <Row class="margin-top-8">
                                <Col span="8"><p class="notwrap">本次登录时间:</p></Col>
                                <Col span="16" class="padding-left-8">{{loginTime}}</Col>
                            </Row>
                            <Row class="margin-top-8">
                                <Col span="8"><p class="notwrap">本次登录地点:</p></Col>
                                <Col span="16" class="padding-left-8">{{loginAsd}}</Col>
                            </Row>
                        </Card>
                    </Col>
                    <Col :md="12" :lg="24" v-if="userSf" :style="{marginBottom: '10px'}">
                        <Card>
                            <p slot="title" class="card-title">
                                <Icon type="android-checkbox-outline"></Icon>
                                快捷入口
                            </p>
                            <!--<a type="text" slot="extra" @click.prevent="addNewToDoItem">-->
                                <!--<Icon type="plus-round"></Icon>-->
                            <!--</a>-->
                            <!--<Modal-->
                                <!--v-model="showAddNewTodo"-->
                                <!--title="添加新的待办事项"-->
                                <!--@on-ok="addNew"-->
                                <!--@on-cancel="cancelAdd">-->
                                <!--<Row type="flex" justify="center">-->
                                    <!--<Input v-model="newToDoItemValue" icon="compose" placeholder="请输入..." style="width: 300px" />-->
                                <!--</Row>-->
                                <!--<Row slot="footer">-->
                                    <!--<Button type="text" @click="cancelAdd">取消</Button>-->
                                    <!--<Button type="primary" @click="addNew">确定</Button>-->
                                <!--</Row>-->
                            <!--</Modal>-->
                            <div class="to-do-list-con">
                                <div  class="to-do-item">
                                    <to-do-list-item></to-do-list-item>
                                </div>
                            </div>
                        </Card>
                    </Col>

                </Row>
            </Col>
            <Col :md="24" :lg="16" v-if="userSf">
                <Row :gutter="5">
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="asd"
                            :end-val="count.creat"
                            iconType="shuffle"
                            color="#2d8cf0"
                            intro-text="今日登陆人数"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="visit_count"
                            :end-val="count.visit"
                            iconType="ios-eye"
                            color="#64d572"
                            :iconSize="50"
                            intro-text="今日注册人数"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="pricetag"
                            :end-val="count.collection"
                            iconType="arrow-swap"
                            color="#ffd572"
                            intro-text="总注册人数"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="transfer_count"
                            :end-val="sxf"
                            iconType="cash"
                            color="#f25e43"
                            intro-text="今日手续费"
                        ></infor-card>
                    </Col>
                </Row>
                <Row>
                    <Col span="12"  :md="12" :lg="12" :xs="24" :style="{marginBottom: '10px'}">
                    <Card>
                        <p slot="title" class="card-title">
                            <Icon type="ios-pulse-strong"></Icon>
                            今日充值提现
                        </p>
                        <div class="data-source-row" style="height: 271px">
                            <data-source-pie></data-source-pie>
                        </div>
                    </Card>
                    </Col>
                    <Col span="12" :md="12" :lg="12" :xs="24"  class="padding-left-10" >
                    <Card style="margin-bottom: 10px;">
                        <p slot="title">
                            <Icon type="paintbucket"></Icon>
                            预计明日矿机收益
                        </p>
                        <Row type="flex" justify="center" align="middle" class="countto-page-row" style="height: 88px">
                            <div class="count-to-con" >
                                <CountTo :endVal="count.transfer" :mainStyle="mainStyle" :countStyle="countStyles">
                                    <!--<span slot="leftText">今日手续费:&nbsp;</span>-->
                                    <span slot="rightText">&nbsp;</span>
                                </CountTo>
                            </div>
                        </Row>
                    </Card>
                    <Card>
                        <p slot="title">
                            <Icon type="paintbucket"></Icon>
                            今日兑换积分
                        </p>
                        <Row type="flex" justify="center" align="middle" class="countto-page-row" style="height:88px">
                            <div class="count-to-con">
                                <CountTo :endVal="jf" :mainStyle="mainStyle" :countStyle="countStyle">
                                    <!--<span slot="leftText">今日兑换积分:&nbsp;</span>-->
                                    <span slot="rightText">&nbsp;</span>
                                </CountTo>
                            </div>
                        </Row>
                    </Card>
                    </Col>
                </Row>
            </Col>
        </Row>

        <Row :gutter="10" v-if="userSf">
            <Col :md="24" :lg="8">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-wifi"></Icon>
                    平台每日统计
                </p>
                <div class="data-source-row">
                    <user-flow></user-flow>
                </div>
            </Card>
            </Col>
            <Col :md="24" :lg="16" :style="{marginBottom: '10px'}" >
                <Card style="margin-left: 5px;">
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        平台总统计
                    </p>
                    <div class="data-source-row">
                        <visite-volume></visite-volume>
                    </div>
                </Card>
            </Col>
        </Row>

        <Row :gutter="10" v-if="userSf">
            <Col  :xs="24" :sm="12" :md="8"  class="padding-left-10" >
            <Card style="margin-bottom: 10px;height: 100%">
                <p slot="title" style="height: 17px;">
                    <Icon type="paintbucket"></Icon>
                    USDI总充值
                </p>
                <Row type="flex" justify="center" align="middle" class="countto-page-row" style="height:60px">
                    <div class="count-to-con" >
                        <CountTo :endVal="count.usdicz" :mainStyle="mainStyle" :countStyle="countStyle">
                            <span slot="rightText">&nbsp;</span>
                        </CountTo>
                    </div>
                </Row>
            </Card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
            <infor-card
                    id-name="assd"
                    :end-val="count.zjzc"
                    iconType="shuffle"
                    color="#2d8cf0"
                    intro-text="今日直接注册人数"
            ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
            <infor-card
                    id-name="visist_count"
                    :end-val="count.jjzc"
                    iconType="ios-eye"
                    color="#64d572"
                    :iconSize="50"
                    intro-text="今日邀请注册人数"
            ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
            <infor-card
                    id-name="priscetag"
                    :end-val="count.zsxf"
                    iconType="arrow-swap"
                    color="#ffd572"
                    intro-text="总手续费"
            ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
            <infor-card
                    id-name="trasnsfer_count"
                    :end-val="count.usditx"
                    iconType="cash"
                    color="#f25e43"
                    intro-text="USDI总提现"
            ></infor-card>
            </Col>
        </Row>
    </div>
</template>

<script>
import cityData from './map-data/get-city-value.js';
import homeMap from './components/map.vue';
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';
import mapDataTable from './components/mapDataTable.vue';
import toDoListItem from './components/toDoListItem.vue';

import $http from '../../utils/axiosWrap';
import Cookies from 'js-cookie'
import CountTo from '../my-components/count-to/CountTo.vue';

export default {
    name: 'home',
    components: {
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        username:'',
        dengji:'',
        toDoListItem,
        loginTime:'',
        loginAsd:'',
        CountTo
    },
    data () {
        return {
            count: {
                creat: '',
                visit: 0,
                collection: 0,
                transfer: 0,
                usdicz:0,
                usditx:0,
                usdizxxf:0,
                zjzc:0,
                zsxf:0,
                jjzc:0
            },
            cityData: cityData,
            showAddNewTodo: false,
            newToDoItemValue: '',
            endVal: 0,
            mainStyle: {
                fontSize: '30px'
            },
            countStyle: {
                fontSize: '50px',
                color: '#dc9387'
            },
            countStyles:{
                color: '#dc9387'
            },
            mainStyle2: {
                fontSize: '22px'
            },
            countStyle2: {
                fontSize: '30px',
                color: '#dc9387'
            },
            sxf:'',
            jf:'',
            userSf:true
        };
    },
    created(){
        let _this = this
        _this.username = Cookies.get('user')
         if(Cookies.get('access') == 0){
             _this.dengji = '超级管理员'
         }else if (Cookies.get('access') == 1){
             _this.dengji = '普通管理员'
         }else if (Cookies.get('access') == 2){
             _this.dengji = '用户身份审核管理员'
             _this.userSf = false
         }else{
             _this.dengji = '操盘手账号'
         }
        _this.loginTime =  Cookies.get('loginTime')
        _this.loginAsd =  Cookies.get('address')
        $http.get('/backgroundIntoLockAccount/getPlatformAccount').then(function (res) {
            console.log(res)
            if(res.result.usdTopUpAmount){
                _this.count.usdicz = res.result.usdTopUpAmount / 1
            }else{
                _this.count.usdicz = 0
            }
            if(res.result.usdExtractAmount){
                _this.count.usditx = res.result.usdExtractAmount / 1
            }else{
                _this.count.usditx = 0
            }
            if(res.result.feeAmount){
                _this.count.zsxf = res.result.feeAmount / 1
            }else{
                _this.count.zsxf = 0
            }
        })
//        今日手续费 积分
        $http.get('backgroundIntoLockAccount/getTodayPlatformAccount').then(function (res) {
            _this.jf = res.result.integralConsumeAmount / 1
            _this.sxf = res.result.feeAmount / 1
        })
//        今日登陆人数
        $http.get('backgroundUser/getAllLogin').then(function (res) {
            _this.count.creat = res.result / 1
        })
//        今日注册人数
        $http.get('backgroundUser/getRegisterNumber').then(function (res) {
            _this.count.visit = res.result.今天总注册人数 / 1
            _this.count.zjzc = res.result.今天总普通注册人数 / 1
            _this.count.jjzc = res.result.今天总推荐注册人数 / 1
        })
//总注册人数
        $http.get('backgroundUser/getAllRegisterNumber').then(function (res) {
            _this.count.collection = res.result / 1
        })
//        矿机预计收益
        $http.get('oreAllModules/earningsYesterday').then(function (res) {
            _this.count.transfer = res.result.allTotalOreEarning / 1
        })
    },
    computed: {
        avatorPath () {
            return localStorage.avatorImgPath;
        }
    },
    methods: {
        addNewToDoItem () {
            this.showAddNewTodo = true;
        },
        addNew () {
            if (this.newToDoItemValue.length !== 0) {
                this.toDoList.unshift({
                    title: this.newToDoItemValue
                });
                setTimeout(() => {
                    this.newToDoItemValue = '';
                }, 200);
                this.showAddNewTodo = false;
            } else {
                this.$Message.error('请输入待办事项内容');
            }
        },
        cancelAdd () {
            this.showAddNewTodo = false;
            this.newToDoItemValue = '';
        }
    }
};
</script>
